import React, { Component } from 'react'
import {connect} from 'react-redux'
import {Redirect, Route, Switch} from 'react-router-dom'
import {deleteUserInfo} from '../../redux/actions_creators/login'
import {Layout} from 'antd'
import './css/admin.less'
import Header from './header/Header'
import LeftNav from './leftNav/LeftNav'
import Home from '../../components/Home/Home'
import Category from '../category/Category'
import Product from '../product/Product'
import User from '../user/User'
import Bar from '../bar/Bar'
import Line from '../line/Line'
import Pie from '../pie/Pie'
import Role from '../role/Role'
import AddUpdate from '../product/AddUpdate'
import Detail from '../product/Detail'



const {Sider, Content, Footer} = Layout
@connect(
  state => ({userInfo: state.userInfo}),
  {
    deleteUserInfo: deleteUserInfo
  }
)
class Admin extends Component {
  // 在render中实现跳转 使用 redirect
  render() {
    const {isLogin, user} = this.props.userInfo
    if (!isLogin) {
      return <Redirect to="/login"></Redirect>
    }
    return (
      <Layout className="admin">
        <Sider className="admin-sider">
          <LeftNav/>
        </Sider>
        <Layout>
          <Header username={user.username}/>
          <Content className="admin-content">
            <Switch>
              <Route path="/admin/home" component={Home}></Route>
              <Route path="/admin/prod/category" component={Category}></Route>
              <Route path="/admin/prod/product/detail" component={Detail}></Route>
              <Route path="/admin/prod/product/addUpdate" component={AddUpdate}></Route>
              <Route path="/admin/prod/product" component={Product}></Route>
              <Route path="/admin/user" component={User}></Route>
              <Route path="/admin/role" component={Role}></Route>
              <Route path="/admin/charts/pie" component={Pie}></Route>
              <Route path="/admin/charts/line" component={Line}></Route>
              <Route path="/admin/charts/bar" component={Bar}></Route>
            </Switch>
          </Content>
          <Footer className="admin-footer">React后台管理系统   ©2021   Created by JXD</Footer>
        </Layout>
      </Layout>

    )
  }
}
export default Admin

// export default connect(
//   state => ({userInfo: state.userInfo}),
//   {
//     deleteUserInfo: deleteUserInfo
//   }
// )(AdminUI)